<template>
  <div class="audition10">
    <p>推荐阅读1：<a href="https://www.ruanyifeng.com/blog/2014/10/event-loop.html" target="_blank">阮一峰--再谈eventloop</a></p>
    <p>推荐阅读2：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop" target="_blank">MDN--事件循环</a><span class="color">(*注：中文页面可能会出现图片破碎化情况，切换为英文可查看图片)</span></p>
    <p>-----------------------------------------------------------------</p>
    <p>js是单线程的脚本语言，所有的任务都被放在主线程中执行</p>
    <p>所以，在执行任务时，不同的任务会排队执行，形成执行栈。前一个任务执行结束，才会去执行下一个任务。</p>
    <p>为防止阻塞，js任务分为同步任务和异步任务。</p>
    <p>同步任务会在执行栈中排队执行，而异步任务会被挂起，当异步任务可以被执行时，异步任务会被放进任务队列里等待进入执行栈去执行。</p>
    <p>当执行栈中的任务都执行完后，执行结束的任务出栈，js会去读取任务队列中排在最前面的任务，并把这个任务放到执行栈中去执行。</p>
    <p>执行栈执行任务----主线程读取任务队列----任务添加到执行栈里执行，这个过程会一直循环，这个循环就叫<span class="color">事件循环(Event Loop)</span></p>
    <p>图示：</p>
    <img src="@images/loop1.png" alt="" class="img">
    <p>示例：</p>
    <v-md-preview :text="text1" />
    <p>fn任务进去执行栈执行，setTimeout任务挂起，等待100ms</p>
    <p>fn任务执行结束，输出结果111，出栈。主线程到任务队列里读取任务，任务为空</p>
    <p>100ms后，setTimeout停止挂起，被放进任务队列，等待进入执行栈</p>
    <p>主线程读取任务队列，发现有任务，把该任务放入执行栈里执行</p>
    <p>执行栈中的任务输出结果222，执行结束，出栈...</p>
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition10',
  data() {
    return {
      text1: `${prefix}
        function fn() {
          console.log(111)
        }
        setTimeout(() => {
          console.log(222)
        }, 100)
        fn()
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>